<!--
 * @Author: your name
 * @Date: 2021-07-13 20:18:19
 * @LastEditTime: 2021-07-16 08:26:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \练习库e:\72-briup\briupteamproj\src\views\List.vue
-->

<template>
  <div class="list wrapper">
    <Header></Header>
    <ArticleFrame>
      <Links slot="links"></Links>
      <ul class="art">
        <li
          class="article"
          @click="toArticle(item.id)"
          v-for="item in articleList"
          :key="item.id"
        >
          <div class="title">
            <img src="/images/icons.jpg" alt="" />
            {{ item.title }}
          </div>
          <div class="publish_time">
            {{ item.publishTime | fmtDate }}
          </div>
        </li>
      </ul>
    </ArticleFrame>
    <Footer></Footer>
  </div>
</template>
<script>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
import Links from './components/Links.vue'
import ArticleFrame from './components/ArticleFrame.vue'

import { get } from '../utils/request'
export default {
  data() {
    return {
      params: {
        page: 1,
        pageSize: 10,
      },
      articleList: [],
    }
  },
  components: {
    Header,
    Footer,
    Links,
    ArticleFrame,
  },
  methods: {
    loadList() {
      let url = '/index/article/pageQuery'
      get(url, this.params).then((res) => {
        this.articleList = res.data.list
      })
    },
    toArticle(articleId) {
      this.$router.push({
        path: '/article',
        query: { articleId },
      })
    },
  },
  created() {
    if (this.$route.query.id == 3) {
      this.$router.push('/home')
      return
    }
    this.params.categoryId = this.$route.query.id
    this.loadList()
  },
  watch: {
    '$route.query': {
      handler(query) {
        if (query.id == 3) {
          this.$router.push('/home')
          return
        }
        this.params.categoryId = query.id
        this.loadList()
      },
    },
  },
}
</script>
<style scoped>
.wrapper {
  width: 65%;
  margin: 0 auto;
}
/* 链接样式 */
.art {
  padding: 5px;
  margin: 0;
}
.article {
  padding: 5px;
  border-radius: 3px;
  background-color: white;
  display: flex;
  flex-direction: row;
  line-height: 1.5em;
  height: 1.5em;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: small;
}
.article > .title {
  width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  color: #000;
}
.article > .publice_time {
  width: 100px;
  text-align: right;
}
</style>